<style scoped>
li {
    list-style-type: none;
    display: inline;
    margin-left: 81px;
    /*color: white;*/
    font-size: 17px;
    cursor: pointer;
}

li:nth-child(1) {
    margin-left: 0
}

.navigate {
    background-color: #1890ff;
    width: 100%;
    height: 60px;
    display: flex;
    position: fixed;
    z-index: 99;
}

.logo {
    margin-left: 9%;
    margin-top: 10px;
    cursor: pointer;
}

.choose {
    margin-right: 5%;
    margin-top: 5px;
}

.search-container {
    display: flex;
    align-items: center;
    width: 226px;
}

.search-input {
    border: none;
    outline: none;
    flex: 1;
    padding: 5px;
    height: 23px;
    font-size: 14px;
    border-radius: 6px 0 0 6px;
    border-right: 1px solid #d9afaf;
}

#search:hover {
    color: #000;
}

#search {
    font-size: 1.8em;
    background-color: white;
    color: #555;
    height: 31px;
    cursor: pointer;
    padding: 2px 1px 0 1px;
}

.login {
    display: flex;
    margin-top: 13px;
    margin-left: 53px;
}

#touxiang {
    cursor: pointer;
    width: 38px;
    height: 38px;
    border-radius: 36px;
}

.login div {
    font-size: 18px;
    padding: 5px 0 0 18px;
    color: aliceblue;
    cursor: pointer;
    max-width: 152px;
    overflow: hidden;
}

.exitLogin {
    font-size: 12px;
    margin-top: 24px;
    margin-left: 18px;
    color: white;
    text-decoration: underline;
    cursor: pointer;
}
</style>

<template>
    <div class="navigate">
        <img src="../../assets/logo.png" class="logo" @click="Navigate(0)">
        <div class="choose">
            <ul>
                <li @click="Navigate(1)" :style="{ color: index === 1 ? '#9c0505' : 'white' }">自选股</li>
                <li @click="Navigate(2)" :style="{ color: index === 2 ? '#9c0505' : 'white' }">新闻资讯</li>
                <li @click="Navigate(3)" :style="{ color: index === 3 ? '#9c0505' : 'white' }">论坛</li>
                <li @click="Navigate(4)" :style="{ color: controlAiArea === 1 ? '#9c0505' : 'white' }">AI问答</li>
            </ul>
        </div>
        <div class="search-container">
            <input type="text" v-model="keyword" class="search-input" placeholder="搜索...">
            <i @click="SearchMessage" class="iconfont icon-sousuokuang" id="search"></i>
        </div>
        <div @click="ToLogin" class="login">
            <img :src="UserAvatar" id="touxiang">
            <div>{{ UserName }}</div>
        </div>
        <div v-if="loginState" class="exitLogin" @click="exitLogin">
            退出登录
        </div>
    </div>
    <div style="width: 100%;height: 60px;"></div>
    <AiCommunication />
</template>

<script setup>
import { useRouter } from "vue-router";
import { onMounted, ref, watch } from "vue";
import { useCounterStore } from "@/stores/counter.js";
import AiCommunication from "@/components/AiCommunication/AiCommunication.vue";
const Router = useRouter();

const store = useCounterStore()

let controlAiArea = ref(0)
// 搜索关键字
const keyword = ref("")

let index = ref(0)


function ChangeNavigate() {
  let message=store.HeaderNavigate
  index.value=message
}
watch(()=>store.HeaderNavigate,()=>{
    if(store.HeaderNavigate!==index.value){
      ChangeNavigate()
    }
},{immediate:true})

function Navigate(i) {
    if (i === 4) {
        controlAiArea.value = 1
        store.isOpenAiTalking = true
        return
    }
    index.value = i
    store.HeaderNavigate=i
    switch (i) {
        case 0: Router.push('/'); break;
        case 1: Router.push('/SelectedStocks'); break;
        case 2: Router.push('/journalism'); break;
        case 3: Router.push('/forumList'); break;
    }
}

watch(() => store.isOpenAiTalking, () => {
    if (store.isOpenAiTalking === false) {
        controlAiArea.value = 0
    } else {
        controlAiArea.value = 1
    }
}, { immediate: true })

function SearchMessage() {
    index.value = 99
    Router.push({
        path: '/SearchResult',
        query: {
            keyword: keyword.value
        }
    })
}

function ToLogin() {
    index.value = 99
    if (store.loginStatus === false) {
        Router.push('/login')
        return;
    }
    Router.push('/PersonalMessage')
}

let loginState = ref(false)
let UserAvatar = ref('')
let UserName = ref('登录/注册')
watch(() => store.loginStatus, () => {
    let message = store.UserMessage
    loginState.value = store.loginStatus
    if (store.loginStatus) {
        UserAvatar.value = message.avatar ? message.avatar : 'https://huage66666.oss-cn-chengdu.aliyuncs.com/%E5%A4%B4%E5%83%8F.png'
        UserName.value = message.userName
        return;
    }
    UserAvatar.value = 'https://huage66666.oss-cn-chengdu.aliyuncs.com/%E5%A4%B4%E5%83%8F.png'
    UserName.value = '登录/注册'
}, { immediate: true })
watch(() => store.UserMessage, () => {
    let message = store.UserMessage
    if (message.userName === undefined) {
        return;
    }
    UserAvatar.value = message.avatar ? message.avatar : 'https://huage66666.oss-cn-chengdu.aliyuncs.com/%E5%A4%B4%E5%83%8F.png'
    UserName.value = message.userName
}, { deep: true })

function exitLogin() {
    store.loginStatus = false
    store.UserMessage = {}
    sessionStorage.removeItem('token')
    Router.push('/')
}
</script>
